<template>
  <div class="pull bigTableStyle">
    <!-- 记录人记录时间 -->
    <div class="pull-top">
      <div class="text colorh">
        <div>记录人:</div>
        <div>
          <el-select
            v-model="formData.djrmc"
            placeholder="请选择"
            clearable
            :style="{width: '100%'}"
            @change="jlrChange"
          >
            <el-option
              v-for="(item, index) in initTextData.jcjlr"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
        <div>记录时间:</div>
        <div>{{formData.timestamp}}</div>
      </div>
      <!-- form表单 -->
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="2rem">
        <!-- 1 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="变电站" prop="bdzMc">
              <el-input v-model="formData.bdzMc" size="mini" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运行编号" porp="xdcMc">
              <el-input v-model="formData.xdcMc" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="24">
                <el-form-item label="测试分类" prop>
                  <el-radio v-model="formData.csfl" label="01" size="mini">普测</el-radio>
                  <el-radio v-model="formData.csfl" label="02" size="mini">抽测</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 2 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="单只标称电压(V)" prop>
              <el-input
                v-model="formData.dzbcdy"
                controls-position="right"
                @change="handleChange"
                :min="1"
                size="mini"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="全电池浮充电压(V)" prop>
              <el-input v-model="formData.zddy" size="mini"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="浮充电流(A)" prop>
              <el-input v-model="formData.cddlqk" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 3 -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="全电池数(只)" prop>
              <el-input type="input" v-model="formData.qdcs" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号" prop>
              <el-input type="input" v-model="formData.xh" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="测试成员" prop>
              <el-select
                v-model="formData.clrmc"
                placeholder="请选择"
                clearable
                :style="{width: '100%'}"
                size="mini"
                @change="csfzrChange"
              >
                <el-option
                  v-for="(item, index) in initTextData.jcjlr"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                  size="mini"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-row>
              <el-col :span="24">
                <el-form-item label="实测全电池浮充电压" prop>
                  <el-input type="input" v-model="formData.vdy" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>-->
        </el-row>
        <!-- 4 -->
        <el-row :span="8">
          <el-col :span="8">
            <el-form-item label="蓄电池情况" prop>
              <el-input type="input" v-model="formData.xdcqk" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="环境温度(℃)" prop>
              <el-input type="input" v-model="formData.xdcswd" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop>
              <el-input type="input" v-model="formData.dcqk" size="mini" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item label="负荷电流(A)" prop>
              <el-input type="input" v-model="formData.fdl" size="mini" />
            </el-form-item>
          </el-col>-->
        </el-row>

        <!-- 5 -->
        <el-row>
          <!-- <el-col :span="8">
            <el-form-item label="测试负责人" prop>
              <el-select
                v-model="formData.CSFZR"
                placeholder="请选择"
                clearable
                :style="{width: '100%'}"
                size="mini"
                @change="csfzrChange"
              >
                <el-option
                  v-for="(item, index) in initTextData.jcjlr"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                  size="mini"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
          <!-- <el-col :span="8">
            <el-form-item label="测试成员" prop>
              <el-select
                v-model="formData.clrmc"
                placeholder="请选择"
                clearable
                :style="{width: '100%'}"
                size="mini"
              >
                <el-option
                  v-for="(item, index) in initTextData.jcjlr"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                  size="mini"
                ></el-option>
              </el-select>
              <el-input v-model="formData.clrmc" size="mini"></el-input>
            </el-form-item>
          </el-col>-->
        </el-row>
      </el-form>
    </div>
    <!-- tbale表格 -->
    <div class="pull-in">
      <el-table
        ref="deviceTable"
        border
        v-loading="isShowLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        :data="tableData"
        @selection-change="handleSelectionChange"
        height="100%"
        :row-class-name="tableRowClassName"
        style="width: 100%;height:100%;"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="xdcbh" label="蓄电池编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="yxzt" label="运行状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.yxzt==='10'">{{scope.row.yxzt==='10'?'未投运':''}}</div>
            <div v-if="scope.row.yxzt==='20'">{{scope.row.yxzt==='20'?'在运':''}}</div>
            <div v-if="scope.row.yxzt==='30'">{{scope.row.yxzt==='30'?'退役':''}}</div>
            <div v-if="scope.row.yxzt==='31'">{{scope.row.yxzt==='31'?'现场留':''}}</div>
            <div v-if="scope.row.yxzt==='32'">{{scope.row.yxzt==='32'?'库存备':''}}</div>
            <div v-if="scope.row.yxzt==='33'">{{scope.row.yxzt==='33'?'待报废':''}}</div>
            <div v-if="scope.row.yxzt==='40'">{{scope.row.yxzt==='40'?'报废':''}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="xdcdy" label="蓄电池浮充电压(V)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ydydzpc" label="与平均浮充电压偏差" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>

    <div class="pull-bottom">
      <div class="scrz">
        <el-checkbox v-model="f">生成日志</el-checkbox>
      </div>
      <el-button type="primary" @click="pullBtn">推送</el-button>
      <el-button type="primary" @click="calcelBtn">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import axios from "axios";
import time from "../../../../../utils/time.js";
import { log } from "three";
@Component
export default class propBtn extends Vue {
  @Prop() flages!: any[];
  public formData: any = {
    bdzId: "1500000001",
    bdzMc: "220kV天平变电站",
    xdcMc: "站用蓄电池组（新）I",
    xdcMcId: "29846edb4c8a0c761076e399fe01772983662d33c7",
    csfl: "01",
    dzbcdy: null,
    zddy: "233.8",
    xdcqk: null,
    xdcswd: "0",
    cddlqk: "0",
    clrid: null,
    clrmc: null,
    clsj: "1611736319000",
    djrid: null,
    djrmc: null,
    djrq: null,
    jlfl: null,
    qdcs: null,
    timestamp: "",
    group: "",
    CSFZR: "",
    DJRMC: "",
    selectjlry: "",
    selectcsfzr: "",
  };
  tableData: any = [];
  f = true;
  isShowLoading: any = false;
  // fullscreenLoading: any = false;
  rules: any = {};
  initTextData: any = {};

  handleChange() {
    console.log("handleChange");
  }
  handleSelectionChange() {
    console.log("handleSelectionChange");
  }
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //   记录人下拉框数据
  initText() {
    console.log("initText");
    var from: any = {};
    from.bdzId = this.$route.query.code || "";
    from.jgId = "";
    (this as any).$services
      .getBlqTop({ data: from })
      .then((result: any) => {
        // console.log(result);
        if (result.code == 200) {
          this.initTextData = result.data;
          this.formData.BDZID = result.data.bdzId;
          //   this.DJBZMC = result.data.bdzMc;
          //   this.formData.DJRQ = result.data.jcsj;
          //   this.formData.JCSJ = result.data.jlsj;
          // this.jclb = result.data.jclx;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // bdznyjpt-online-monitor
  // 推送
  pullBtn() {
    var form: any = {
      // bdzId: this.formData.bdzId, // 变电站id
      dzbcdy: this.formData.dzbcdy, //单只标称电压(V)	query	true
      bdzid: this.formData.bdzId, //变电站	query	true
      cddlqk: this.formData.cddlqk, //充电电流	query	true
      clrid: this.formData.clrid, //测试成员ID	query	true
      clrmc: this.formData.clrmc, //测试成员	query	true
      clsj: this.formData.clsj, //检测日期	query	true
      csfl: this.formData.csfl, //02普测、01 抽测,可用值:01,02	query	true
      djrid: this.formData.djrid, //登记人ID	query	true
      djrmc: this.formData.djrmc, //	登记人名称	query	true
      djrq: this.formData.timestamp, //登记日期	query	true
      xh: this.formData.xh, //	query	true
      group: 1, //第几组蓄电池 1 第一组 2 第二组,可用值:1,2	query	true
      xdcswd: this.formData.xdcswd, //环境温度	query	true
      orPush: "1", //是否生成日志 0 是 1 否		true
      xdcqk: this.formData.xdcqk, //蓄电池情况	query	true
      qdcs: this.formData.qdcs, //全电池数（只）	query	true
      xdcmc: this.formData.xdcMc, //运行编号	query	true
      zddy: this.formData.zddy, //组端电压(V)	query	true
      orPushLog: this.formData.orPushLog, //orPushLog	query	false
      jlfl: this.formData.jlfl, //记录分类	query	false
      bz: this.formData.bz, // 备注 query	false
    };
    if (!form.djrmc) {
      this.$message.info("选择记录人");
      return;
    }
    // this.fullscreenLoading = true;
    const loading = this.$loading({
      lock: true,
      text: "loading",
      spinner: "el-icon-loading",
      background: "rgba(0,0,0,0.7)",
    });
    console.log("pullBtn");
    // var clsj = time(this.formData.clsj);

    if (this.f) {
      this.formData.orPush = 1;
    } else {
      this.formData.orPush = 0;
    }
    var flage: any = this.flages;
    this.formData.group = flage - 0;
    // console.log(this.formData);
    // console.log(form);

    // if (!form.djrq) {
    //   this.$message.info("选择记录人");
    // }
    // if (!form.csfl) {
    //   this.$message.info("选择测试分类");
    // }
    // if (!form.dzbcdy) {
    //   this.$message.info("填写单只标称电压");
    // }
    // if (!form.qdcs) {
    //   this.$message.info("全电池数");
    // }
    // if (!form.clrmc || !form.clrid) {
    //   this.$message.info("选择测试成员");
    // }

    //  测试
    // var url = `/local/pms/pushBattery`;
    // axios.get(url, { params: form }).then((res: any) => {
    //   console.log(res);
    //   if (res.code === 200) {
    //     this.$message({
    //       type: "success",
    //       message: res.message,
    //     });
    //     this.pullList();
    //     this.tableList();
    //   } else {
    //     this.$message.error(res.message);
    //   }
    // });

    // 线上
    (this as any).$services
      .pushBattery({ data: form })
      .then((result: any) => {
        console.log(result);
        if (result.code === 200) {
          this.$message({
            type: "success",
            message: result.message,
          });
          this.pullList();
          this.tableList();
          this.$emit("handleClose");
          loading.close();
        } else {
          this.$message.error(result.message);
        }
        // this.$emit("handleClose");
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  calcelBtn() {
    // console.log("calcelBtn");
    this.$emit("handleClose");
    this.pullList();
    this.tableList();
  }
  // 推送弹窗form表格
  pullList() {
    // console.log(this.flages);
    // // 测试接口
    // var url = `/local/pms/queryBatteryLog`;
    // axios.get(url, { params: { group: this.flages } }).then((res: any) => {
    //   console.log(res);
    //   if (res.code === 200) {
    //     this.formData = res.data[0];
    //     console.log(this.formData);
    //     var times = time(res.timestamp);
    //     this.formData.timestamp = times;

    //     var clsj = time(res.data[0].clsj - 0);
    //     this.formData.clsj = clsj;

    //     // console.log(this.formData.clsj);
    //     // console.log(this.formData);
    //   } else {
    //     this.$message.error(res.message);
    //   }
    // });

    // 线上
    (this as any).$services
      .queryBatteryLog({ data: { group: this.flages } })
      .then((result: any) => {
        // console.log(result);
        if (result.code === 200) {
          this.formData = result.data[0];
          // console.log(this.formData);
          var times = time(result.timestamp);
          this.formData.timestamp = times;

          var clsj = time(result.data[0].clsj - 0);
          this.formData.clsj = clsj;

          // console.log(this.formData.clsj);
          // console.log(this.formData);
          // 全选
          // this.$nextTick(() => {
          //   for (let i = 0; i < this.tableData.length; i++) {
          //     (this.$refs as any).deviceTable.toggleRowSelection(
          //       this.tableData[i],
          //       true
          //    );
          //  }
          // });
        } else {
          this.$message.error(result.message);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 推送弹窗table表格
  // private tableDatalist = [];
  tableList() {
    this.isShowLoading = true;
    // 测试
    // var url = `/local/pms/queryBatteryResult`;
    // axios.get(url, { params: { group: this.flages } }).then((res: any) => {
    //   console.log(res);
    //   this.tableData = res.data;
    // });
    // console.log(this.tableData);

    // 在线
    (this as any).$services
      .queryBatteryResult({ data: { group: this.flages } })
      .then((result: any) => {
        console.log(result);
        this.tableData = result.data;
        this.isShowLoading = false;
      })
      .catch((err: any) => {
        console.log(err);
      });
  }
  jlrChange(val) {
    // 人员的code
    // console.log(val);
    // 人员名称
    this.initTextData.jcjlr.forEach((e) => {
      if (e.code === val) {
        this.formData.selectjlry = e.name;
      }
    });
    this.formData.djrmc = this.formData.selectjlry;
    this.formData.djrid = val;
    console.log(this.formData.selectjlry);
  }
  csfzrChange(val) {
    console.log(val);
    // 测试人员名称
    this.initTextData.jcjlr.forEach((e) => {
      if (e.code === val) {
        this.formData.clrmc = e.name;
      }
    });
    console.log(this.formData.clrmc);
    this.formData.clrid = val;
    console.log(this.formData.clrid);
  }
  mounted() {
    this.initText();
    this.pullList();
    this.tableList();
  }
}
</script>

<style lang="scss" scoped>
.pull {
  width: calc(100% - 0.18rem);
  height: 4.6rem;
  box-sizing: border-box;
  position: relative;

  .pull-top {
    width: 100%;
    height: 50%;
    // border: 1px solid #000;
    overflow: auto;
    .text {
      position: absolute;
      left: 0;
      top: -0.4rem;
      height: 5%;
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 0.12rem;

      > div {
        margin: 0 0.15rem;
      }
    }
    .el-form {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      padding-bottom: 0.2rem;
    }
  }
  .el-row {
    .el-col {
      .el-form-item {
        padding: 0;
        margin: 0.08rem;
      }
    }
  }
  //   表格
  .pull-in {
    width: 100%;
    height: 75%;
    // border: 1px solid #000;
    overflow: auto;
  }

  .pull-bottom {
    width: 100%;
    height: 0.5rem;
    bottom: -0.1rem !important;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .scrz {
      position: absolute;
      left: 0;
      top: 0;
      line-height: 0.5rem;
    }
  }
  .clsj {
    margin: 0.1rem 0;
    display: flex;
    div {
      padding: 0 0.1rem;
    }
  }
}
.el-radio__label {
  color: #fff;
}
</style>
<style lang="scss" >
.el-radio__input.is-checked + .el-radio__label {
  color: #fff !important;
}
</style>
